<template>
  <!--电池-水滴图-->
  <div id="battery" style="height: 138px; width: 100%"></div>
</template>

<script>
export default {
  name: "Battery",
  prpps: {
    energy: String
  },
  methods: {
    myBattery() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('battery'));
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: '#000' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter: function (value) {
            return '当前电量: ' + (value.data * 10 * 10) + '%'
          }
        },
        series: [{
          type: 'liquidFill',
          data: [0.6],
          color: ['#00cbff'],
          // 半径
          radius: '90%',
          //波动方向
          // direction: 'bottom',
          // 水填充图的形状
          shape: 'path://M264.192 534.528h148.48v51.712h-148.48v-51.712z m349.696 0h48.64V486.4h51.712v48.128h48.128v51.712h-48.128v48.128h-51.712v-48.128H614.4v-51.712h-0.512z m32.256-303.104l-7.168 76.288H387.072l-7.168-76.288H265.216l-7.168 76.288H152.576v478.72h719.872V307.712h-103.936l-7.168-76.288h-115.2z',
          label: {
            normal: {
              //fontSize:80    //这里也可以设置
              textStyle: {
                //修改字体大小
                fontSize: 20
              }
            }
          },
          outline: {
            show: true,
            borderDistance: 0, // 边框线与图表的距离 数字
            itemStyle: {
              opacity: 1, // 边框的透明度   默认为 1
              borderWidth: 2, // 边框的宽度
              shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
              shadowColor: '#a8a5a5', // 边框的阴影颜色,
              borderColor: '#a8a5a5' // 边框颜色
            }
          },
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },

  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.myBattery()
  }
}
</script>

<style scoped>

</style>
